<div class="container" style="padding-top: 30px;">
    <div class="row">
        <div class="col-9 col-md-9">
            <h1>Buckets</h1>
        </div>
        <div class="col-md-3 col-3 align-right">
            <button type="button" mdbBtn gradient="aqua" rounded="true" class="relative waves-light" mdbWavesEffect rounded="true" data-toggle="modal" data-target="#addBucket" mdbWavesEffect (click)="resetForm();addBucketModal.show()"><mdb-icon fas icon="plus" class="mr-1"></mdb-icon>Add bucket</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-12 mx-auto">
          <div class="md-form">
            <input type="text" [(ngModel)]="searchText" class="form-control" id="search" mdbInput>
            <label for="search">Search</label>
          </div>
        </div>
    </div>
	<table mdbTable class="table" #tableBuckets="mdbTable" >
	  <thead class="thead-light">
	    <tr>
	      <th>Name</th>
	      <th>Tags</th>
	      <th>Creation Date</th>
	      <th *ngIf="(diskUsageInfo?.bucketsSizes | json) != ({} | json)">Size</th>
	      <th>Quota</th>
	      <th *ngIf="serviceInfo?.sqsARN">Event</th>
	      <th>Options</th>
	    </tr>
	  </thead>
	  <tbody *ngIf="buckets">
	    <tr mdbTableCol *ngFor="let b of objectKeys(buckets); let i = index">
	      <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
          <strong>{{buckets[b].name}}</strong>
          <span *ngIf="buckets[b].encryption?.Rules" mdbTooltip="Bucket encrypted">&nbsp;&nbsp;<mdb-icon fas icon="lock" size="1x" class="red-text pr-1" aria-hidden="true"></mdb-icon></span>
          <span mdbTooltip="Policy. Click to download" (click)="downloadPolicy(buckets[b].name, 'policy_'+buckets[b].name+'_'+buckets[b].policy+'.json')" class="ml-2 badge badge-primary pointer" *ngIf="buckets[b].policy!='none'">{{buckets[b].policy}}</span>
        </td>
	      <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
          <span *ngIf="objectKeys(buckets[b].tags)?.length > 0">
            <ul class="type-none">
              <li *ngFor="let tag of objectKeys(buckets[b].tags)" class="type-none">{{tag}}: {{buckets[b].tags[tag]}}</li>
            </ul>
          </span>
        </td>
	      <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{buckets[b].info.creationDate | date : "dd/MM/yy HH:mm:ss" }}</td>
	      <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex && (diskUsageInfo?.bucketsSizes | json) != ({} | json)">
          <span *ngIf="diskUsageInfo?.bucketsSizes" mdbTooltip="{{diskUsageInfo?.bucketsSizes[buckets[b].name]}} bytes" placement="top">
            {{(math.round(diskUsageInfo?.bucketsSizes[buckets[b].name]/1024/1024)+'').length > 3 ? math.round(diskUsageInfo?.bucketsSizes[buckets[b].name]/1024/1024/1024)+' Gb' : isNaN(math.round(diskUsageInfo?.bucketsSizes[buckets[b].name]/1024/1024)) ? '&ndash;' : math.round(diskUsageInfo?.bucketsSizes[buckets[b].name]/1024/1024) +' Mb'}}
          </span>
        </td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex && (diskUsageInfo?.bucketsSizes | json) != ({} | json)">
          <span *ngIf="buckets[b].quota?.quotatype">
            <span class="badge badge-success" *ngIf="buckets[b].quota?.quotatype == 'hard'">{{buckets[b].quota?.quotatype}}</span>
            <span class="badge badge-secondary" *ngIf="buckets[b].quota?.quotatype == 'fifo'">{{buckets[b].quota?.quotatype}}</span>
          </span>
          <span *ngIf="buckets[b].quota?.quota > 0" mdbTooltip="{{buckets[b].quota?.quota}} bytes" placement="top">
            {{(math.round(buckets[b].quota?.quota/1024/1024)+'').length > 3 ? math.round(buckets[b].quota?.quota/1024/1024/1024)+' Gb' : isNaN(math.round(buckets[b].quota?.quota/1024/1024)) ? '&ndash;' : math.round(buckets[b].quota?.quota/1024/1024) +' Mb'}}
          </span>
          <span *ngIf="buckets[b].quota?.quota < 1" mdbTooltip="No quota limits" placement="top">
            &infin;
          </span>
        </td>
	      <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex && serviceInfo?.sqsARN">
          <span *ngIf="buckets[b].events.LambdaConfigs?.length">
            Lambda:
            <span *ngFor="let c of buckets[b].events?.LambdaConfigs">
              {{c.Lambda}}<br/>
              <ul class="type-none">
                <li *ngFor="let e of c?.Events">
                  {{e}}
                </li>
              </ul>
            </span>
          </span>
          <span *ngIf="buckets[b].events.TopicConfigs?.length">
          Topic:
          <span *ngFor="let c of buckets[b].events?.TopicConfigs">
             {{c.Topic}} <br/>
              <ul class="type-none">
                <li *ngFor="let e of c?.Events">
                  {{e}}
                </li>
              </ul>
            </span>
          </span>
          <span *ngIf="buckets[b].events.QueueConfigs?.length">
          Queue:
            <span *ngFor="let c of buckets[b].events?.QueueConfigs">
              {{c.Queue}} <br/>
              <ul class="type-none">
                <li *ngFor="let e of c?.Events">
                  {{e}}
                </li>
              </ul>
            </span>
          </span>
        </td>
	  	  <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
	  	  	<a mdbTooltip="Update Bucket" placement="top" (click)="updateBucketPrepare(buckets[b].name,buckets[b].quota?.quota,buckets[b].quota?.quotatype,buckets[b].tags); editBucketModal.show()"><mdb-icon fas icon="pencil-alt" size="1x" class="green-text pr-1" aria-hidden="true"></mdb-icon></a><span class="pr-1">&nbsp;</span>
	  	  	<a mdbTooltip="Remove Bucket" placement="top" (click)="deleteBucketPrepare(buckets[b].name); deleteApproveModal.show()"><mdb-icon fas icon="trash-alt" size="1x" class="red-text pr-1" aria-hidden="true"></mdb-icon></a><span class="pr-1">&nbsp;</span>
	  	  	<a mdbTooltip="Bucket Lifecycyle" placement="top" (click)="bucketLifecycle(buckets[b].name); downloadLifecycle(buckets[b].name); resetLifecycleForm(); lifecycyleModal.show()"><mdb-icon fas icon="recycle" size="1x" class="green-text pr-1" aria-hidden="true"></mdb-icon></a><span class="pr-1">&nbsp;</span>
	  	  	<a *ngIf="buckets[b].events.LambdaConfigs?.length || buckets[b].events.TopicConfigs?.length || buckets[b].events.QueueConfigs?.length" mdbTooltip="Remove Bucket Events" placement="top" (click)="removeBucketNotificationPrepare(buckets[b].name); removeNotificationApproveModal.show()"><mdb-icon fas icon="bell-slash" size="1x" class="red-text pr-1" aria-hidden="true"></mdb-icon></a><span class="pr-1" *ngIf="buckets[b].events.LambdaConfigs?.length || buckets[b].events.TopicConfigs?.length || buckets[b].events.QueueConfigs?.length">&nbsp;</span>
          <a *ngIf="buckets[b].quota?.quota" mdbTooltip="Remove Bucket Quota" placement="top" (click)="deleteBucketQuotaPrepare(buckets[b].name); removeQuotaApproveModal.show()"><mdb-icon fas icon="expand" size="1x" class="red-text pr-1" aria-hidden="true"></mdb-icon></a>
          <a *ngIf="buckets[b].encryption?.Rules" mdbTooltip="Remove Bucket Encryption" placement="top" (click)="deleteBucketEncryptionPrepare(buckets[b].name); removeEncryptionApproveModal.show()"><mdb-icon fas icon="unlock-alt" size="1x" class="red-text pr-1" aria-hidden="true"></mdb-icon></a>
	  	  </td>
	    </tr>
	  </tbody>
      <tfoot class="grey lighten-5 w-100">
        <tr>
          <td colspan="100%">
            <mdb-table-pagination [tableEl]="tableBuckets" [searchDataSource]="buckets"></mdb-table-pagination>
          </td>
        </tr>
      </tfoot>
	</table>
</div>
<br/>
<br/>

<!-- lifecycyle modal -->

<div mdbModal #lifecycyleModal="mdbModal" class="modal fade right overflow-auto" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
   aria-hidden="true" [config]='{backdrop: true, ignoreBackdropClick: true}'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="lifecycyleModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">{{lifecycleBucketName}} Bucket Lifecycyle</h4>
            </div>
            <div class="modal-body">
              <div class="row">
                <div class="col-md-12 col-12 mx-auto">
                  <div class="alert alert-success" role="alert" *ngIf="downloadLifecycleAvailable == 1" >
                    <mdb-icon fas icon="info-circle" class="mr-1"></mdb-icon>This bucket already have a lifecycyle policy, you can export it as JSON by clicking on "dowload icon" >
                    <a mdbTooltip="Download Lifecycle" placement="top" [href]="downloadJsonHref" download="{{lifecycleBucketName}}-lifecycle.json"><mdb-icon fas icon="download" size="1x" class="green-text pr-1" aria-hidden="true"></mdb-icon></a>
                    <br/>
                    Or override it by upload a new lifecycle policy.
                    <br/>
                    <br/>
                    <b>Current lifecycle:</b>
                    <div class="lifecycle-preview">
                      <table mdbTable class="table table-sm lifecycle-preview" #tableBuckets="mdbTable" *ngIf="lifecycleCurrentData?.Rules">
                        <thead>
                          <tr>
                            <th>ID</th>
                            <th>Prefix</th>
                            <th>Enabled</th>
                            <th>Expiry</th>
                            <th>Date/Days</th>
                            <th>Transition</th>
                            <th>Date/Days</th>
                            <th>Storage-Class</th>
                            <th>Tags</th>
                          </tr>
                        </thead>
                        <tbody >
                          <tr mdbTableCol *ngFor="let b of objectKeys(lifecycleCurrentData?.Rules); let i = index">
                            <td>{{lifecycleCurrentData?.Rules[b]?.ID}}</td>
                            <td class="align-middle">{{lifecycleCurrentData?.Rules[b]?.Prefix}}{{lifecycleCurrentData?.Rules[b]?.RuleFilter?.And?.Prefix}}{{lifecycleCurrentData?.Rules[b]?.RuleFilter?.Prefix}}</td>
                            <td><span *ngIf="lifecycleCurrentData?.Rules[b]?.Status == 'Enabled'"><i class="fas fa-check"></i></span><span *ngIf="lifecycleCurrentData?.Rules[b]?.Status != 'Enabled'">-=<i class="fas fa-times"></i></span></td>
                            <td><span *ngIf="lifecycleCurrentData?.Rules[b]?.Expiration?.Date != '0001-01-01T00:00:00Z' || lifecycleCurrentData?.Rules[b]?.Expiration?.Days"><i class="fas fa-check"></i></span><span *ngIf="lifecycleCurrentData?.Rules[b]?.Expiration?.Date == '0001-01-01T00:00:00Z' && !lifecycleCurrentData?.Rules[b]?.Expiration?.Days"><i class="fas fa-times"></i></span></td>
                            <td><span *ngIf="lifecycleCurrentData?.Rules[b]?.Expiration?.Date != '0001-01-01T00:00:00Z'">{{lifecycleCurrentData?.Rules[b]?.Expiration?.Date}}</span><span *ngIf="lifecycleCurrentData?.Rules[b]?.Expiration?.Days">{{lifecycleCurrentData?.Rules[b]?.Expiration?.Days}}</span></td>
                            <td><span *ngIf="lifecycleCurrentData?.Rules[b]?.Transition?.Date != '0001-01-01T00:00:00Z' || lifecycleCurrentData?.Rules[b]?.Transition?.Days"><i class="fas fa-check"></i></span><span *ngIf="lifecycleCurrentData?.Rules[b]?.Transition?.Date == '0001-01-01T00:00:00Z' || !lifecycleCurrentData?.Rules[b]?.Transition?.Days"><i class="fas fa-times"></i></span></td>
                            <td><span *ngIf="lifecycleCurrentData?.Rules[b]?.Transition?.Date != '0001-01-01T00:00:00Z'">{{lifecycleCurrentData?.Rules[b]?.Transition?.Date != '0001-01-01T00:00:00Z'}}</span><span *ngIf="lifecycleCurrentData?.Rules[b]?.Transition?.Days">{{lifecycleCurrentData?.Rules[b]?.Transition?.Days}}</span></td>
                            <td>{{lifecycleCurrentData?.Rules[b]?.Transition?.StorageClass}}</td>
                            <td>{{lifecycleCurrentData?.Rules[b]?.RuleFilter?.And?.Tags}}</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="alert alert-info" role="alert" *ngIf="downloadLifecycleAvailable == 0" >
                    <mdb-icon fas icon="info-circle" class="mr-1"></mdb-icon>Lifecycle policy is structrured xml file. You can use examples from Minio
                    <a href="https://docs.min.io/docs/java-client-api-reference.html#setBucketLifeCycle" target="_blank">documentation</a>. Or use an AWS S3 documentation
                    <a href="https://docs.aws.amazon.com/AmazonS3/latest/dev/object-lifecycle-mgmt.html" target="_blank">Object Lifecycle Management</a>
                  </div>
                  <div class="d-flex justify-content-around p-1 mb-3 text-center">
										<div class="custom-file">
										  <input type="file" accept=".lifecycle,.xml,.json" class="custom-file-input" (change)="fileChanged($event)" #uploadLifecycleFile name="uploadLifecycleFile">
										  <label class="custom-file-label" for="customFileLang">{{uploadLifecycleFileName == "" ? "Choose .lifecycle, .xml or .json file" : uploadLifecycleFileName}}</label>
										</div>
									</div>
                </div>
              </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" mdbBtn gradient="peach" rounded="true" class="relative waves-light" mdbWavesEffect (click)="uploadLifecycle();lifecycyleModal.hide()">Upload</button>
            </div>
        </div>
    </div >
</div >

<!-- delete approve modal -->

<div mdbModal #deleteApproveModal="mdbModal" class="modal fade right overflow-auto" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
   aria-hidden="true" [config]='{backdrop: true, ignoreBackdropClick: true}'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="deleteApproveModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Remove Bucket</h4>
            </div>
            <div class="modal-body">
                Are you shure? <br/> After you click on <strong>"Delete"</strong> button bucket <strong>{{bucketToDelete}}</strong> will be removed.
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" mdbBtn color="success" class="waves-light" aria-label="Close" (click)="deleteApproveModal.hide()" mdbWavesEffect>Cancel</button>
                <button type="button" mdbBtn color="danger" class="relative waves-light" mdbWavesEffect (click)="deleteBucket(); deleteApproveModal.hide()">Delete</button>
            </div>
        </div>
    </div >
</div >

<!-- remove notify approve modal -->

<div mdbModal #removeNotificationApproveModal="mdbModal" class="modal fade right overflow-auto" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
   aria-hidden="true" [config]='{backdrop: true, ignoreBackdropClick: true}'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="removeNotificationApproveModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Remove Bucket Notifications</h4>
            </div>
            <div class="modal-body">
                Are you shure? <br/> After you click on <strong>"remove"</strong> button bucket <strong>{{bucketToRemoveNotifications}}</strong> notifications will be removed.
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" mdbBtn color="success" class="waves-light" aria-label="Close" (click)="removeNotificationApproveModal.hide()" mdbWavesEffect>Cancel</button>
                <button type="button" mdbBtn color="danger" class="relative waves-light" mdbWavesEffect (click)="removeBucketEvents(); removeNotificationApproveModal.hide()">Remove</button>
            </div>
        </div>
    </div >
</div >

<!-- remove quotas approve modal -->

<div mdbModal #removeQuotaApproveModal="mdbModal" class="modal fade right overflow-auto" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
   aria-hidden="true" [config]='{backdrop: true, ignoreBackdropClick: true}'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="removeQuotaApproveModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Remove Bucket Quota Limits</h4>
            </div>
            <div class="modal-body">
                Are you shure? <br/> After you click on <strong>"remove"</strong> button quota for bucket <strong>{{bucketToRemoveQuota}}</strong> will be removed.
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" mdbBtn color="success" class="waves-light" aria-label="Close" (click)="removeQuotaApproveModal.hide()" mdbWavesEffect>Cancel</button>
                <button type="button" mdbBtn color="danger" class="relative waves-light" mdbWavesEffect (click)="removeBucketQuota(); removeQuotaApproveModal.hide()">Remove</button>
            </div>
        </div>
    </div >
</div >

<!-- remove encryption approve modal -->

<div mdbModal #removeEncryptionApproveModal="mdbModal" class="modal fade right overflow-auto" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
   aria-hidden="true" [config]='{backdrop: true, ignoreBackdropClick: true}'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="removeEncryptionApproveModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Remove Encryption</h4>
            </div>
            <div class="modal-body">
                Are you shure? <br/> After you click on <strong>"remove"</strong> button encryption for bucket <strong>{{bucketToRemoveEncryption}}</strong> will be removed.
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" mdbBtn color="success" class="waves-light" aria-label="Close" (click)="removeEncryptionApproveModal.hide()" mdbWavesEffect>Cancel</button>
                <button type="button" mdbBtn color="danger" class="relative waves-light" mdbWavesEffect (click)="removeBucketEncryption(); removeEncryptionApproveModal.hide()">Remove</button>
            </div>
        </div>
    </div >
</div >


<!-- create modal -->

<div mdbModal #addBucketModal="mdbModal" class="modal fade right overflow-auto" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
   aria-hidden="true" [config]='{backdrop: true, ignoreBackdropClick: true}'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="addBucketModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Create Bucket</h4>
            </div>
            <div class="modal-body">
                <div class="d-flex justify-content-around mb-3 text-center">
        					<input type="text" class="form-control" placeholder="Bucket Name" [(ngModel)]="newBucketName" name="newBucketName"  aria-label="bucketName" aria-describedby="basic-addon1" autofocus>
        				</div>
                <div class="alert alert-info" role="alert">
                  <mdb-icon fas icon="info-circle" class="mr-1"></mdb-icon>  You can pass multiple names with "," delimiter
                </div>
                <div class="separator pointer">Policy</div>
                <div class="d-flex justify-content-around p-1 text-center">
                  <select class="browser-default custom-select" (change)="updatePolicyType()" [(ngModel)]="newBucketPolicy" title="Select policy type">
                    <option [value]="pType" *ngFor="let pType of policyTypes">{{pType}}</option>
                  </select>
                </div>
                <div class="d-flex justify-content-around p-1 mb-3 text-center" *ngIf="newBucketPolicy=='custom'">
                  <div class="custom-file">
                    <input type="file" accept=".policy,.json" class="custom-file-input" (change)="filePolicyChanged($event)" #uploadPolicyFile name="uploadPolicyFile">
                    <label class="custom-file-label" for="customFileLang">{{uploadPolicyFileName == "" ? "Choose .policy or .json file" : uploadPolicyFileName}}</label>
                  </div>
                </div>
                <div class="mb-3" *ngIf="serviceInfo?.services?.vault?.status != 'disabled'">
                  <div class="separator pointer">Encryption</div>
                  <select class="browser-default custom-select" [(ngModel)]="newBucketEncryption" title="Select encryption type">
                    <option value="" disabled selected>Select encryption</option>
                    <option [value]="encType" *ngFor="let encType of encryptionTypes">{{encType}}</option>
                  </select><br/><br/>
                  <div class="d-flex justify-content-around mb-3 text-center" *ngIf="newBucketEncryption == 'sse-kms'">
          					<input type="text" class="form-control" placeholder="Master Key ID" [(ngModel)]="newBucketMasterKeyID" name="newBucketMasterKeyID"  aria-label="bucketName" aria-describedby="basic-addon1">
          				</div>
                </div>
                <div class="separator pointer">Tags</div>
                <div class="d-flex justify-content-around mb-3 text-center">
                  <div class="form-row">
                      <div class="col">
                          <input type="text" id="newBucketTagName" [(ngModel)]="newBucketTagName" class="form-control" placeholder="Tag name">
                      </div>
                      <div class="col">
                          <input type="text" id="newBucketTagValue" [(ngModel)]="newBucketTagValue" class="form-control" placeholder="Tag value">
                      </div>
                      <div class="col-2">
                          <button class="btn btn-sm blue-gradient button-fix" title="add more tags" (click)="createFormAddTag()"><i class="fas fa-plus"></i></button>
                      </div>
                  </div>
        				</div>
                <section id="listTags" *ngIf="newBucketTagsList">
                  <span class="badge badge-primary ml-2"  mdbTooltip="click to delete" *ngFor="let tag of objectKeys(newBucketTagsList)" (click)="createFormRemoveTag(tag)">{{tag}}: {{newBucketTagsList[tag]}}</span>
                </section>
                <div class="separator pointer" (click)="toggleShowQuota()">Quota<mdb-icon fas icon="angle-down" class="pl-1" *ngIf="!uiShowQuota"></mdb-icon><mdb-icon fas icon="angle-up" class="pl-1" *ngIf="uiShowQuota"></mdb-icon></div>
                <span *ngIf="uiShowQuota">

                  <div class="d-flex justify-content-around p-1 text-center">
                    <select class="browser-default custom-select" [(ngModel)]="newBucketQuotaType" title="Select quota type">
                      <option value="" disabled selected>Select quota type</option>
                      <option [value]="qType" *ngFor="let qType of quotaTypes">{{qType}}</option>
                    </select>
    							</div>

                  <div class="alert alert-info" role="alert">
                    <mdb-icon fas icon="info-circle" class="mr-1"></mdb-icon>
                    In <b>"fifo"</b> mode - old data automatically will be removed when you reach quota limit. <br/>
                    In <b>"hard"</b> mode - you can't add new data to bucket if quota limit reached.
                  </div>

                  <div class="input-group d-flex justify-content-around mb-3 text-center">
          					<input type="text" class="form-control" placeholder="Quota in bytes" [(ngModel)]="newBucketQuota" name="newBucketQuota"  aria-label="bucketQuota" aria-describedby="basic-addon1" autofocus>
                      <div class="input-group-append">
                        <div class="input-group-text">Bytes</div>
                      </div>
                    </div>
                </span>
                <div class="mb-3" *ngIf="serviceInfo?.sqsARN">
                  <div class="separator">Events section</div>
                  <select class="browser-default custom-select" [(ngModel)]="newBucketEventARN" title="Enable notifications">
                    <option value="" disabled selected>Select sqsARN</option>
                    <option [value]="eventARN" *ngFor="let eventARN of serviceInfo?.sqsARN">{{eventARN}}</option>
                  </select><br/><br/>
                  <div id="eventTypeSelector" class="d-flex justify-content-around p-1 mb-3 text-center">
  									<angular2-multiselect [data]="dropdownEventTypesList" [(ngModel)]="selectedEventTypes"
  								    [settings]="dropdownEventTypesSettings"
  								    (onSelect)="onEventTypesItemSelect($event)"
  								    (onDeSelect)="onEventTypesItemDeSelect($event)"
  								    (onSelectAll)="onEventTypesSelectAll($event)"
  								    (onDeSelectAll)="onEventTypesDeSelectAll($event)"></angular2-multiselect>
  								</div>
                  <div class="d-flex justify-content-around mb-3 text-center">
          					<input type="text" class="form-control" placeholder="Filter Prefix" [(ngModel)]="newBucketEventFilterPrefix" name="newBucketEventFilterPrefix"  aria-label="bucketName" aria-describedby="basic-addon1">
          				</div>
                  <div class="d-flex justify-content-around mb-3 text-center">
          					<input type="text" class="form-control" placeholder="Filter Suffix" [(ngModel)]="newBucketEventFilterSuffix" name="newBucketEventFilterSuffix"  aria-label="bucketName" aria-describedby="basic-addon1">
          				</div>
                  <br/>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" mdbBtn gradient="peach" rounded="true" class="relative waves-light" mdbWavesEffect (click)="createBucket(); addBucketModal.hide()">Create</button>
            </div>
        </div>
    </div >
</div >

<!-- edit modal -->

<div mdbModal #editBucketModal="mdbModal" class="modal fade right overflow-auto" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
   aria-hidden="true" [config]='{backdrop: true, ignoreBackdropClick: true}'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="editBucketModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Update Bucket</h4>
            </div>
            <div class="modal-body">
                <div class="d-flex justify-content-around mb-3 text-center">
        					<input type="text" class="form-control" placeholder="Bucket Name" [(ngModel)]="editBucketName" name="editBucketName"  aria-label="bucketName" aria-describedby="basic-addon1" disabled>
        				</div>
                <div class="separator pointer">Policy</div>
                <div class="d-flex justify-content-around p-1 text-center">
                  <select class="browser-default custom-select" (change)="updatePolicyType()" [(ngModel)]="newBucketPolicy" title="Select policy type">
                    <option [value]="pType" *ngFor="let pType of policyTypes">{{pType}}</option>
                  </select>
                </div>
                <div class="d-flex justify-content-around p-1 mb-3 text-center" *ngIf="newBucketPolicy=='custom'">
                  <div class="custom-file">
                    <input type="file" accept=".policy,.json" class="custom-file-input" (change)="filePolicyChanged($event)" #uploadPolicyFile name="uploadPolicyFile">
                    <label class="custom-file-label" for="customFileLang">{{uploadPolicyFileName == "" ? "Choose .policy or .json file" : uploadPolicyFileName}}</label>
                  </div>
                </div>
                <br/>
                <div class="mb-3" *ngIf="serviceInfo?.services?.vault?.status != 'disabled'">
                  <div class="separator pointer">Encryption</div>
                  <select class="browser-default custom-select" [(ngModel)]="updateBucketEncryptionObj" title="Select encryption type" (change)="updateEncryptionType($event)">
                    <option value="" disabled selected>Select encryption</option>
                    <option [value]="encType" *ngFor="let encType of encryptionTypes">{{encType}}</option>
                  </select><br/><br/>
                  <div class="d-flex justify-content-around mb-3 text-center" *ngIf="updateBucketEncryptionObj == 'sse-kms'" (change)="updateEncryptionType($event)">
          					<input type="text" class="form-control" placeholder="Master Key ID" [(ngModel)]="newBucketMasterKeyID" name="newBucketMasterKeyID"  aria-label="bucketName" aria-describedby="basic-addon1">
          				</div>
                </div>
                <div class="separator pointer">Tags</div>
                <div class="d-flex justify-content-around mb-3 text-center">
                  <div class="form-row">
                      <div class="col">
                          <input type="text" id="updateBucketTagName" [(ngModel)]="newBucketTagName" class="form-control" placeholder="Tag name">
                      </div>
                      <div class="col">
                          <input type="text" id="updateBucketTagValue" [(ngModel)]="newBucketTagValue" class="form-control" placeholder="Tag value">
                      </div>
                      <div class="col-2">
                          <button class="btn btn-sm blue-gradient button-fix" title="add more tags" (click)="createFormAddTag()"><i class="fas fa-plus"></i></button>
                      </div>
                  </div>
        				</div>
                <section id="listTags" *ngIf="newBucketTagsList">
                  <span class="badge badge-primary ml-2"  mdbTooltip="click to delete" *ngFor="let tag of objectKeys(newBucketTagsList)" (click)="createFormRemoveTag(tag)">{{tag}}: {{newBucketTagsList[tag]}}</span>
                </section>
                <br/>
                <div class="separator">Quota section</div>
                <span>
                  <div class="d-flex justify-content-around p-1 text-center">
                    <select class="browser-default custom-select" (change)="updateQuotaType()" [(ngModel)]="updateBucketQuotaObj.quotatype" title="Select quota type">
                      <option value="" disabled selected>Select quota type</option>
                      <option [value]="qType" *ngFor="let qType of quotaTypes">{{qType}}</option>
                    </select>
    							</div>

                  <div class="alert alert-info" role="alert">
                    <mdb-icon fas icon="info-circle" class="mr-1"></mdb-icon>
                    In <b>"fifo"</b> mode - old data automatically will be removed when you reach quota limit. <br/>
                    In <b>"hard"</b> mode - you can't add new data to bucket if quota limit reached.
                  </div>

                  <div class="input-group d-flex justify-content-around mb-3 text-center">
          					<input type="text" class="form-control" (change)="updateQuota()" placeholder="Quota in bytes" [(ngModel)]="updateBucketQuotaObj.quota" name="updateBucketQuota"  aria-label="bucketQuota" aria-describedby="basic-addon1" autofocus>
                    <div class="input-group-append">
                      <div class="input-group-text">Bytes</div>
                    </div>
                  </div>
                </span>
                <div class="mb-3" *ngIf="serviceInfo?.sqsARN">
                  <div class="separator">Events section</div>
                  <select class="browser-default custom-select" [(ngModel)]="updateBucketEventARN" title="Enable notifications">
                    <option value="" disabled selected>Select sqsARN</option>
                    <option [value]="eventARN" *ngFor="let eventARN of serviceInfo?.sqsARN">{{eventARN}}</option>
                  </select><br/><br/>
                  <div id="eventTypeSelector" class="d-flex justify-content-around p-1 mb-3 text-center">
  									<angular2-multiselect [data]="dropdownEventTypesList" [(ngModel)]="selectedEventTypes"
  								    [settings]="dropdownEventTypesSettings"
  								    (onSelect)="onEventTypesItemSelect($event)"
  								    (onDeSelect)="onEventTypesItemDeSelect($event)"
  								    (onSelectAll)="onEventTypesSelectAll($event)"
  								    (onDeSelectAll)="onEventTypesDeSelectAll($event)"></angular2-multiselect>
  								</div>
                  <div class="d-flex justify-content-around mb-3 text-center">
          					<input type="text" class="form-control" placeholder="Filter Prefix" [(ngModel)]="updateBucketEventFilterPrefix" name="updateBucketEventFilterPrefix"  aria-label="bucketName" aria-describedby="basic-addon1">
          				</div>
                  <div class="d-flex justify-content-around mb-3 text-center">
          					<input type="text" class="form-control" placeholder="Filter Suffix" [(ngModel)]="updateBucketEventFilterSuffix" name="updateBucketEventFilterSuffix"  aria-label="bucketName" aria-describedby="basic-addon1">
          				</div>
                  <br/>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" mdbBtn gradient="peach" rounded="true" class="relative waves-light" mdbWavesEffect (click)="updateBucket(updateBucketQuotaObj.quotatype,updateBucketQuotaObj.quota); editBucketModal.hide(); resetUpdateForm();">Update</button>
            </div>
        </div>
    </div >
</div >
